<template>
  <custom-table
    ref="table"
    rowKey="phoneNumber"
    bordered
    :showAlert="false"
    :showSelection="false"
    :loading="loading"
    :columns="columns"
    :dataSource="pageData"
    :rowClassName="rowClassName"
    @rowClick="onRowClick"
    @change="onTableChange"
  >
    <template slot="lastResultTime" slot-scope="text, record">
      <span v-if="text">{{ text | dayjs }}</span>
      <span v-else>{{ text }}</span>
    </template>
    <template slot="phoneNumber" slot-scope="text, record">
      <span>{{ text }}</span>
      <a-tag v-if="record.isSamplePerson" style="margin-top:10px;" color="red">负样本人员</a-tag>
    </template>
  </custom-table>
</template>

<script>
import * as eventModelApi from '@/api/wxSmuggle/eventModel.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { querySimpleByPhoneList } from '@/utils/util'
export default {
  props: {
    taskId: {
      type: [Number, String]
    }
  },
  components: {
    CustomTable
  },
  data() {
    return {
      loading: false,
      selectKey: null,
      modelId: null,
      form: {},
      columns: [
        {
          title: '序号',
          width: 60,
          align: 'center',
          dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '手机号',
          dataIndex: 'phoneNumber',
          width: 130,
          align: 'center',
          scopedSlots: { customRender: 'phoneNumber' }
        },
        {
          title: '姓名/代号',
          dataIndex: 'userName',
          width: 100,
          align: 'center'
        },
        {
          title: '更新时间',
          dataIndex: 'lastResultTime',
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'lastResultTime' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  watch: {
    taskId(val) {
      console.log(val)
      this.refreshTable()
    }
  },
  mounted() {
    if (this.$route.query && Object.keys(this.$route.query).length > 0) {
      let query = this.$route.query
      if (query.modelId) {
        this.modelId = query.modelId
      }
    }
  },
  methods: {
    // 表格选中class
    rowClassName(record, index) {
      let className = ''
      if (record.phoneNumber === this.selectKey) className = 'row-selected'
      return className
    },
    // 点击表格
    onRowClick(keys) {
      this.selectKey = keys && Object.keys(keys).length > 0 && keys.phoneNumber ? keys.phoneNumber : null
      let item = Object.assign({}, keys)
      this.$emit('selectItemClick', item)
    },
    // 获取目标对象列表
    refreshTable() {
      this.$set(this.form, 'taskId', this.taskId)
      this.$set(this.form, 'modelId', this.modelId)
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      eventModelApi
        .getModelTaskUser(form)
        .then(res => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            // 默认点击第一条记录
            if (this.pageData && Object.keys(this.pageData).length > 0 && this.pageData.total > 0) {
              this.onRowClick(this.pageData.records[0])
            }
            //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
            querySimpleByPhoneList(this, 1, this.pageData.records)
            this.loading = false
          } else {
            this.loading = false
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.row-selected {
  background-color: #e6f7ff;
}
/deep/.ant-table-row {
  cursor: pointer;
}
/deep/.ant-table-thead > tr > th,
/deep/.ant-table-tbody > tr > td {
  padding-left: 0;
  padding-right: 0;
}
</style>
